<template>
	<cl-drawer
		ref="drawer"
		:props="{
			title: '推广链接',
			size: '1100px'
		}"
		@close="close"
	>
		<cl-crud ref="crud" @load="onLoad">
			<cl-pagefull @resize="onResize">
				<cl-table v-bind="table">
					<template #column-opt="{ scope: { row } }">
						<!-- <el-button
							type="primary"
							:disabled="!row.bind"
							v-clipboard:copy="getLink(row)"
						>
							复制
						</el-button> -->
						<el-dropdown class="mr-1" size="medium">
							<el-button type="primary" :disabled="!row.bind">
								复制链接<i class="el-icon-arrow-down el-icon--right" />
							</el-button>
							<el-dropdown-menu slot="dropdown">
								<el-dropdown-item v-clipboard:copy="getLink(row, 1)"
									>动态链接</el-dropdown-item
								>
								<el-dropdown-item v-clipboard:copy="getLink(row, 2)"
									>静态链接</el-dropdown-item
								>
								<!-- <el-dropdown-item v-clipboard:copy="getShowLink(row, 1, '&click_id=__CLICKID__')">
									展示监测
								</el-dropdown-item>
								<el-dropdown-item v-clipboard:copy="getShowLink(row, 2, '')">
									触点监测
								</el-dropdown-item> -->
							</el-dropdown-menu>
						</el-dropdown>
						<el-button
							@click="bindTemplate(row)"
							v-auth="'store_landinglandinglist_link_bdmb'"
						>
							绑定模板
						</el-button>
						<!-- <el-button type="primary" @click="toMpLink(row)" :loading="row.loading">
							转小程序链接
						</el-button> -->
					</template>
				</cl-table>
			</cl-pagefull>
		</cl-crud>
		<bind-template ref="bind" :ad-info="adInfo" :type="type" @confirm="refresh" />
		<promo-link-mp ref="mpLink" />
	</cl-drawer>
</template>
<script>
	import { appEnv } from "@/config/env";
	import qs from "qs";
	import BindTemplate from "./bind-template";
	import PromoLinkMp from "./promo-link-mp";
	export default {
		name: "promotion-link",
		components: {
			BindTemplate,
			PromoLinkMp
		},
		props: {
			type: {
				type: String,
				default: "land"
			}
		},
		data() {
			return {
				table: {
					"context-menu": ["refresh"],
					columns: [
						{ type: "index", label: "序号", width: 50, fixed: true },
						{ label: "渠道ID", prop: "id", minWidth: 80 },
						{
							label: "推广渠道",
							prop: "cname",
							minWidth: 120,
							align: "left",
							showOverflowTooltip: true
						},
						{
							label: "链接",
							prop: "link",
							minWidth: 280,
							formatter: (row) => this.getLink(row),
							align: "left",
							showOverflowTooltip: true
						},
						{ label: "操作", prop: "opt", width: 220, fixed: "right" }
					],
					props: {
						maxHeight: 500
					}
				},
				adInfo: {}
			};
		},
		methods: {
			onResize(h) {
				this.table.props.maxHeight = h;
			},
			open(data) {
				this.$refs.drawer.create();
				this.adInfo = { ...data };
			},
			close() {},
			onLoad({ ctx, app }) {
				ctx.service(this.$service.ad)
					.set("dict", {
						api: {
							page: "bindRelatedList"
						}
					})
					.done();

				const { biz_id, id } = this.adInfo;

				app.refresh({ biz_id, status: 1, type: this.type == "land" ? 1 : 2, ad_id: id });
			},
			// crud刷新
			refresh() {
				const { biz_id, id } = this.adInfo;
				this.$refs.crud.refresh({
					page: 1,
					biz_id,
					status: 1,
					type: this.type == "land" ? 1 : 2,
					ad_id: id
				});
			},
			async toMpLink(row) {
				let query = this.getLinkQuery(row);
				this.$set(row, "loading", true);
				const res = await this.$service.ad
					.getMiniLink({ query: qs.stringify(query) })
					.finally(() => {
						this.$set(row, "loading", false);
					});
				this.$refs.mpLink.open(res.url_link);
			},
			// 生成链接
			getLink(row, type = 1) {
				let query = this.getLinkQuery(row);
				if (type == 2 && row.mobile_html_file_name == "") {
					this.$message.warning('绑定的模板没有静态页面');
					return false
				}
				const host = row.media_platform == 2 ? "https://ad.qinmei.cchaosheng.com/" : "https://ad.qinmei.cchaosheng.com/"
				const path = type == 2 ? row.mobile_html_file_name+"?" : "ad?"
				return `${ host + path }${qs.stringify(
					query
				)}`+row.link_query;
			},
			getLinkQuery(row) {
				const { id } = this.adInfo;
				let query = {
					id: `${row.id}-${id}`
				};
				return query;
			},
			//展示链接
			getShowLink(row, move_type, moreQueryStr) {
				const { id, id_supplier } = this.adInfo;
				/*  move_type  1:展示 2:有效点击  */
				return `https://apinodejs.suolandai.cn/list/add?ldy_id=${
					row.id
				}-${id}&id_supplier=${id_supplier}&move_type=${move_type}&aid=__AID__&aid_name=__AID_NAME__&cid=__CID__&cid_name=__CID_NAME__&campaign_id=__CAMPAIGN_ID__&campaign_name=__CAMPAIGN_NAME__&ctype=__CTYPE__&advertiser_id=__ADVERTISER_ID__&csite=__CSITE__&convert_id=__CONVERT_ID__&request_id=__REQUEST_ID__&sl=__SL__&imei=__IMEI__&idfa=__IDFA__&idfa_md5=__IDFA_MD5__&androidid=__ANDROIDID__&oaid=__OAID__&oaid_md5=__OAID_MD5__&os=__OS__&mac=__MAC__&mac1=__MAC1__&ipv4=__IPV4__&ipv6=__IPV6__&ip=__IP__&ua=__UA__&geo=__GEO__&ts=__TS__&callback_param=__CALLBACK_PARAM__&callback_url=__CALLBACK_URL__&model=__MODEL__&union_site=__UNION_SITE__&caid=__CAID__&caid1=__CAID1__&caid2=__CAID2__&caid1_md5=__CAID1_MD5__&caid2_md5=__CAID2_MD5__&uid=__UID__${moreQueryStr}`;
			},
			bindTemplate(row) {
				row.adInfo = this.adInfo
				this.$refs.bind.open(row);
			}
		}
	};
</script>
